@media only screen and (min-width: 501px) {

html, .root {
  font-size: 16px;
  line-height: 24px;
}
body, .article {
  font-family: Cabin;
  font-size: 16px;
  line-height: 24px;

}

#box-content{
    padding: 24px 0px 24px 0px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}


#box-content h2{
    text-align: center;
}

#box-content h1, .h1 {
  font-family: Raleway;
  font-size: 54px;
  line-height: 72px;
  margin-top: 24px;
  margin-bottom: 48px;
}
#box-content h2, .h2 {
  font-family: Raleway;
  font-size: 36px;
  line-height: 48px;
  margin-top: 24px;
  margin-bottom: 24px;
}
#box-content h3, .h3 {
  font-family: Raleway;
  font-size: 24px;
  line-height: 24px;
  margin-top: 24px;
  margin-bottom: 0px;
}
#box-content h4, .h4 {
  font-family: Raleway;
  font-size: 16px;
  line-height: 24px;
  margin-top: 24px;
  margin-bottom: 0px;
}
#box-content h5, .h5 {
  font-family: Raleway;
  font-size: 16px;
  line-height: 24px;
  margin-top: 24px;
  margin-bottom: 0px;
}
#box-content p, ul, ol, pre, table, blockquote {
  margin-top: 0px;
  margin-bottom: 24px;
}
#box-content ul ul, ol ol, ul ol, ol ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* Let's make sure all's aligned */
#box-content hr, .hr {
  border: 1px solid;
  margin: -1px 0;
}
#box-content a, b, i, strong, em, small, code {
  line-height: 0;
}
#box-content sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
#box-content sup {
  top: -0.5em;
}
#box-content sub {
  bottom: -0.25em;
}

#box-2-2 h1{
    font-size: 36px;
}
}




@media only screen and (max-width: 500px) {
    html, .root {
  font-size: 16px;
  line-height: 24px;
}
body, .article {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 24px;
  max-width: 560px;
  margin: auto;
}
h1, .h1 {
  font-size: 28px;
  line-height: 48px;
  margin-top: 24px;
  margin-bottom: 48px;
}
h2, .h2 {
  font-size: 23px;
  line-height: 24px;
  margin-top: 24px;
  margin-bottom: 24px;
}
h3, .h3 {
  font-size: 19px;
  line-height: 24px;
  margin-top: 24px;
  margin-bottom: 0px;
}
h4, .h4 {
  font-size: 16px;
  line-height: 24px;
  margin-top: 24px;
  margin-bottom: 0px;
}
h5, .h5 {
  font-size: 16px;
  line-height: 24px;
  margin-top: 24px;
  margin-bottom: 0px;
}
p, ul, ol, pre, table, blockquote {
  margin-top: 0px;
  margin-bottom: 24px;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* Let's make sure all's aligned */
hr, .hr {
  border: 1px solid;
  margin: -1px 0;
}
a, b, i, strong, em, small, code {
  line-height: 0;
}
sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
    
}